<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read Aloud</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <link rel="stylesheet" type="text/css" href="css/popup.css">

  <script src="js/rxjs.umd.min.js"></script>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/defaults.js"></script>
  <script src="js/messaging.js"></script>
  <script src="js/popup.js"></script>
</head>
<body>
  <div id="status">
  </div>
  <div id="buttons">
    <i class="material-icons button-1" id="btnRewind">&#xe020;</i>
    <img src="img/loading.gif" id="imgLoading" />
    <i class="material-icons button-1" id="btnPlay">&#xe037;</i>
    <i class="material-icons button-1" id="btnPause">pause</i>
    <i class="material-icons button-1" id="btnStop">stop</i>
    <i class="material-icons button-1" id="btnSettings">settings</i>
    <i class="material-icons button-1" id="btnForward">&#xe01f;</i>
  </div>
  <div id="highlight">
  </div>
  <div id="toolbar">
    <div class="btn-group">
      <button id="decrease-font-size" type="button" class="btn btn-sm btn-light">
        A-
      </button>
      <button id="increase-font-size" type="button" class="btn btn-sm btn-light">
        A+
      </button>
    </div>
    <div class="btn-group">
      <button id="toggle-dark-mode" type="button" class="btn btn-sm btn-light">
        <i class="material-icons">dark_mode</i>
      </button>
    </div>
    <div class="btn-group window-size">
      <button id="decrease-window-size" type="button" class="btn btn-sm btn-light">
        <i class="material-icons">remove</i>
      </button>
      <button id="increase-window-size" type="button" class="btn btn-sm btn-light">
        <i class="material-icons">add</i>
      </button>
    </div>
  </div>
  <div id="footer">
    <a href="report.html?referer=popup.html">report issues</a>
  </div>
</body>
</html>
